<template>
  <el-dialog
    v-model="visible"
    title="设置政府审核页"
    width="720"
    :close-on-click-modal="false"
    class="min-h-360px"
  >
    <div class="font-bold">添加字段并排序</div>
    <div class="mt-4 children:mb-4">
      <div class="flex gap-2 items-baseline">
        <div class="flex-none w-120px text-right">
          <div class="font-bold">可选字段：</div>
        </div>
        <div class="flex gap-2 flex-wrap">
          <el-check-tag
            :checked="item.checked"
            @change="handleCheck(item, $event)"
            type="warning"
            v-for="item in optionalFields"
            :key="item.key"
          >
            {{ item.name }}
          </el-check-tag>
        </div>
      </div>
      <div class="flex gap-2 items-baseline">
        <div class="flex-none w-120px text-right">
          <div class="font-bold">已选字段：</div>
          <div class="text-sm text-white/30">左右拖动排序&nbsp;&nbsp;</div>
        </div>

        <vue-draggable
          v-model="selectedFields"
          :animation="150"
          class="flex gap-2 flex-wrap"
          @update="handleUpdate"
        >
          <el-tag
            type="info"
            effect="plain"
            v-for="item in selectedFields"
            :key="item.key"
            class="cursor-move"
          >
            {{ item.name }}
          </el-tag>
        </vue-draggable>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

defineOptions({
  name: 'GovernmentExamineSettingModal'
})

const visible = defineModel({ type: Boolean, required: true, default: false })

const initialOptionalFields = () => [
  {
    key: 'k1',
    name: '大分类',
    checked: false
  },
  {
    key: 'k2',
    name: '小分类',
    checked: false
  },
  {
    key: 'k3',
    name: '企业注册地址',
    checked: false
  }
]

const initialSelectedFields = () => [
  {
    key: 'kk1',
    name: '企业名称'
  },
  {
    key: 'kk2',
    name: '企业编码'
  },
  {
    key: 'kk3',
    name: '注册时间'
  },
  {
    key: 'kk4',
    name: '企业名称4'
  },
  {
    key: 'kk5',
    name: '企业编码5'
  },
  {
    key: 'kk6',
    name: '注册时间6'
  },
  {
    key: 'kk7',
    name: '企业名称47'
  },
  {
    key: 'kk8',
    name: '企业编码58'
  },
  {
    key: 'kk9',
    name: '注册时间69'
  }
]

const optionalFields = reactive(initialOptionalFields())
const selectedFields = ref(initialSelectedFields())

const handleCheck = (item: any, value: boolean) => {
  if (value) {
    selectedFields.value.push({ ...item })
  } else {
    const index = selectedFields.value.findIndex((_item) => _item.key === item.key)
    selectedFields.value.splice(index, 1)
  }
  item.checked = value
}

const handleUpdate = (e) => {
  console.log('handleUpdate=====>>', e)
}

watchEffect(() => {
  if (!visible.value) {
    optionalFields.length = 0
    optionalFields.push(...initialOptionalFields())

    selectedFields.value.length = 0
    selectedFields.value.push(...initialSelectedFields())
  }
})
</script>
